<template>
  <div class="read-book" ref="readContent">
    <TopHeader @back="headerBack" @share="headerShare" id="top" :title="'大灭绝时代'"></TopHeader>
    <div class="p-3">
      <div v-for="(item,index) in contentList" :key="index" :id="index" class="inline select-none p-1"
           v-touch:longtap="touchHandler">
        {{ item.txt + ',' }}
      </div>
      <div class="tool-box items-center p-2 select-none" ref="toolBox" v-show="showTool">
        <div class="left-box flex  flex-1">
          <div v-for="item in colorList" class="circle-box mr-3" :style="{'background':item}"
               @click="changeColor(item)"></div>
        </div>
        <div style="width: 2px;background:  rgba(224, 224, 224, 1);;height: 100%"></div>
        <div class="right-box flex justify-around flex-1">
          <i class="iconfont icon-H5yueduqi_biji"></i>
          <i class="iconfont icon-yueduqi_fuzhi" @click="copyText()"></i>
          <i class="iconfont icon-yueduqi_fenxiang" @click="showShare = true"></i>
        </div>
      </div>
    </div>
    <van-share-sheet
        v-model:show="showShare"
        title="立即分享给好友"
        :options="shareOptions"
        @select="onShareSelect"
    />
  </div>
</template>

<script lang="ts" setup>
import {onClickOutside} from '@vueuse/core'
import {onMounted, reactive, toRefs, ref, watch} from "vue";
import {loadFile} from "../util/common";
import Lyric from 'lyric-parser'
import {useWindowSize} from '@vant/use';
import {useClipboard, useScroll} from '@vueuse/core'
import {Notify, Toast} from "vant";

const source = ref('Hello')
const readContent = ref(null)
const {text, copy, copied, isSupported} = useClipboard({source, copiedDuring: 100})
const {x, y, isScrolling, arrivedState} = useScroll(readContent)
const topFixPx = ref('800px')
const toolBox = ref(null)
const reactiveData = reactive({
  contentList: [],
  selectContent: null,
  showTool: true,
  colorList: ['#FF5733', '#FFB433', '#17C297', '#3381FF', '#A733FF']
})
const {contentList, colorList, showTool} = toRefs(reactiveData)
const {width, height} = useWindowSize();
watch(() => isScrolling.value, (val, oval) => {
  reactiveData.showTool = false;
})
onMounted(() => {
  let lyric = new Lyric(loadFile('src/assets/homeland.lrc'))
  // 页面呈现
  reactiveData.contentList = lyric.lines;
})
console.log();
onClickOutside(toolBox, (event) => {
  reactiveData.showTool = false;
})
const touchHandler = (el) => {
  // topFixPx.value = el.changedTouches[0].clientY+'px';
  // if(el.target.offsetTop+el.target.offsetHeight+40> height.value){
  //   topFixPx.value = el.target.offsetTop - el.target.offsetHeight+'px';
  // }else{
  //   topFixPx.value = el.target.offsetTop+el.target.offsetHeight+'px';
  // }
  topFixPx.value = el.target.offsetTop + el.target.offsetHeight + 'px';
  reactiveData.selectContent = el;
  reactiveData.showTool = true;
  el.target.style.background = '#FFEFC4'
}
const changeColor = (color) => {
  reactiveData.selectContent.target.style.background = color
}
const copyText = () => {
  copy(reactiveData.selectContent.target.innerText)
  // Toast('复制成功!');
  Notify('复制成功!');
  reactiveData.showTool = false;
  reactiveData.selectContent.target.style.background = ''
}

</script>

<style lang="scss" scoped>
.read-book {
  .tool-box {
    width: 284px;
    position: absolute;
    display: flex;
    height: 40px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    top: v-bind(topFixPx);
    margin: auto;
    right: 0;
    left: 0;

    .left-box {
      .circle-box {
        border-radius: 50%;
        width: 16px;
        height: 16px;
      }
    }

    .right-box {
      .iconfont {
        font-size: 26px;
        font-weight: 500;
      }
    }
  }
}
</style>
